<template>
  <div class="flex gap-2 flex-wrap">
    <button 
      v-for="option in options" 
      :key="option.value"
      @click="$emit('update:modelValue', option.value)" 
      :class="[
        'px-4 py-2 rounded-full text-sm transition-colors',
        modelValue === option.value
          ? 'bg-primary text-white'
          : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'
      ]"
    >
      {{ option.label }}
    </button>
  </div>
</template>

<script setup>
defineProps({
  modelValue: {
    type: String,
    required: true
  },
  options: {
    type: Array,
    required: true
  }
})

defineEmits(['update:modelValue'])
</script>